<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的建站-首页</title>
<jsp:include page="jspLib/jquery.jsp"></jsp:include>
<jsp:include page="jspLib/jquery-ui.jsp"></jsp:include>
<jsp:include page="jspLib/makisu.jsp"></jsp:include>
</head>
	<style type="text/css">
		body{
			margin:0 auto;
			text-align: center;
			width:90%;
			background-color: #F5F7FA
		}
		.top {
			width:100%;
			height:200px;
			margin-top:10px;
			float:left;
			;
		}
		.logo{
			background-image: url(/cl_framework/images/logo/logo_1.png);
			width: 150px;
			height: 150px;
			margin-left: 88px;
			float: left;
		}
		.search{
			width: 680px;
			height: 50px;
			margin-left: 88px;
			margin-top: 50px;
			float: left;
			background-color: #E5D633;
		}
		
		.navigation_bar{
			width:100%;
			float: left;
			text-align: center;
		}
	</style>
	<script>
		$(function() {
			$("#navigation_bar").buttonset();
			
			
		})
		
	</script>
<body>
	<div id="top"  class="top">
		<div id="logo" class="logo"></div>
		<div id="search" class="search">
			
		</div>
		<div id="" class=""></div>
		<div id="navigation_bar" class="navigation_bar">
				<input type="radio" id="radio1"  name="radio"><label for="radio1">首页</label>
				<input type="radio" id="radio2"  name="radio" ><label for="radio2">产品</label>
				<input type="radio" id="radio3"  name="radio" ><label for="radio3">方案</label>
				<input type="radio" id="radio4"  name="radio" ><label for="radio4">兴趣</label>
				<input type="radio" id="radio5"  name="radio"><label for="radio5">图册</label>
				<input type="radio" id="radio6"  name="radio"><label for="radio6">+关于我们</label>
		</div>
	</div>
	
	<div  id="centent"  class="centent">

	    <section class="demo">
	
	
	
	        <dl class="list maki">
	            <dt>Maki</dt>
	            <dd><a href="#">Ana-kyu</a></dd>
	            <dd><a href="#">Chutoro</a></dd>
	            <dd><a href="#">Kaiware</a></dd>
	            <dd><a href="#">Kampyo</a></dd>
	            <dd><a href="#">Kappa</a></dd>
	            <dd><a href="#">Natto</a></dd>
	            <dd><a href="#">Negitoro</a></dd>
	            <dd><a href="#">Oshinko</a></dd>
	            <dd><a href="#">Otoro</a></dd>
	            <dd><a href="#">Tekka</a></dd>
	        </dl>
	
	
	
	        <a href="#" class="toggle">Toggle</a>
	<div style="text-align:center">    
	</div>
	    </section>
	
	    <div class="warning">
	        <div class="message">
	            <h1>CSS 3D Not Detected :(</h1>
	            <p>I couldn't detect your browser's CSS 3D capabilities. If I'm wrong, please <a href="http://sc.chinaz.com" target="_blank">file an issue</a>, otherwise, try a <a href="http://sc.chinaz.com/" target="_blank">sexier browser</a></p>
	        </div>
	    </div>
	    
	    <script>
	
	        // The `enabled` flag will be `false` if CSS 3D isn't available
	
	        if ( $.fn.makisu.enabled ) {
	
	
	            var $maki = $( '.maki' );
	
	            // Create Makisus
	
	
	
	            $maki.makisu({
	                selector: 'dd',
	                overlap: 0.6,
	                speed: 0.85
	            });
	
	
	            // Toggle on click
	
	            $( '.toggle' ).on( 'click', function() {
	                $( '.list' ).makisu( 'toggle' );
	            });
	
	            // Disable all links
	
	            $( '.demo a' ).click( function( event ) {
	                event.preventDefault();
	            });
	
	        } else {
	
	            $( '.warning' ).show();
	        }
	
	    </script>
	</div>
</body>
</html>